<template>
  <div class="home-item">
    <header>
      <i class="back" @click="back"></i>
      <div class="right">
        <i class="collection" v-if="itemData.pos"></i>
        <div class="text" v-if="itemData.pos">合集 {{itemData.pos}}/999</div>
        <i class="share"></i>
      </div>
    </header>

    <main>
      <div class="head">
        <div class="left">
          <div class="user-img">
            <img v-if="itemData.blogInfo" :src="itemData.blogInfo.bigAvaImg" />
          </div>
          <div class="text">
            <div class="uesr-name" v-if="itemData.blogInfo">{{itemData.blogInfo.blogNickName}}</div>
            <div class="time">
              {{conversionOfTime(itemData.publishTime)}}
              <span
                v-if="itemData.ipLocation"
              >{{itemData.ipLocation}}</span>
            </div>
          </div>
        </div>
        <div class="right">+关注</div>
      </div>

      <div class="swp">
        <van-swipe :autoplay="3000" indicator-color="#2e2e2e">
          <van-swipe-item v-for="(image, index) in advertisingData" :key="index">
            <img v-lazy="image.orign" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="text">
        <div v-html="itemData.digest"></div>
      </div>

      <div class="tag">
        <span v-for=" (it,i) in itemData.tagList" :key="i">#{{it}}</span>
      </div>

      <div class="fun">
        <div class="icon">
          <div class="left">
            <i
              class="like"
              v-if="itemData.postCount"
              :class="[itemData.postCount.viewCount == 1 ? 'selected' : '']"
              @click.stop="switchSelected(itemData.id)"
            ></i>
            <i class="comments"></i>
            <i
              class="recommend"
              :class="[share ? 'selected-recommend' : '']"
              @click="share = ! share"
            ></i>
          </div>
          <i
            class="collection"
            :class="[collection ? 'selected-collection' : '']"
            @click="switchCollection(itemData.id,advertisingData[0].orign)"
          ></i>
        </div>
        <div class="hot">
          <div class="post-hot" v-if="itemData.postCount">热度 {{itemData.postCount.postHot}}</div>
          <div class="count" v-if="itemData.postCount">评论{{itemData.postCount.responseCount}}</div>
        </div>
      </div>

      <div class="comments">
        <h2>热门评论</h2>

        <div class="on" v-show="!show">
          <i></i>
          <div>来都来了，不说两句嘛~</div>
          <div class="btn">发表评论</div>
        </div>

        <div class="show" v-show="show">
          <ul>
            <li v-for="c in commentsData" :key="c.id">
              <div class="user-img" v-if="c.publisherBlogInfo">
                <img :src="c.publisherBlogInfo.bigAvaImg" alt />
              </div>
              <div class="text">
                <div class="user-name">{{c.publisherBlogInfo.blogNickName}}</div>
                <div class="content">{{c.content}}</div>
                <div class="time">{{funtime(c.publishTime)}} · {{c.ipLocation}}</div>
              </div>
              <i></i>
            </li>
          </ul>
        </div>

        <van-cell class="van-cell" v-show="show" is-link @click="showPopup">
          <div class="txt">
            查看全部评论
            <i></i>
          </div>
        </van-cell>

        <van-popup v-model="showPop" round position="bottom">
          <div class="all-comments">
            <div class="hot-reviews" v-show="hottList.length">
              <h2>热门评论</h2>
              <ul>
                <li v-for="h in hottList" :key="h.id">
                  <div class="user-img" v-if="h.publisherBlogInfo">
                    <img :src="h.publisherBlogInfo.bigAvaImg" alt />
                  </div>
                  <div class="text">
                    <div class="user-name">{{h.publisherBlogInfo.blogNickName}}</div>
                    <div class="content">{{h.content}}</div>
                    <div class="time">{{funtime(h.publishTime)}} · {{h.ipLocation}}</div>
                  </div>
                  <i></i>
                </li>
              </ul>
            </div>

            <div class="reviews" v-show="list.length">
              <h2>最新评论</h2>
              <ul>
                <li v-for="l in list" :key="l.id">
                  <div class="user-img" v-if="l.publisherBlogInfo">
                    <img :src="l.publisherBlogInfo.bigAvaImg" alt />
                  </div>
                  <div class="text">
                    <div class="user-name">{{l.publisherBlogInfo.blogNickName}}</div>
                    <div class="content">{{l.content}}</div>
                    <div class="time">{{funtime(l.publishTime)}} · {{l.ipLocation}}</div>
                  </div>
                  <i></i>
                </li>
              </ul>
            </div>

            <div class="make-comment">
              <form action="/">
                <van-search v-model="value" shape="round" placeholder="评论支持太太" @click="showPopup" />
              </form>

              <div class="send" @click="send">发送</div>
            </div>
          </div>
        </van-popup>
      </div>

      <div class="recommended">
        <h2>更多推荐</h2>
      </div>
      <masonry-view :DataArr="dataArr" />
    </main>

    <footer>
      <form action="/">
        <van-search
          v-model="value"
          shape="round"
          placeholder="评论支持太太"
          :left-icon="icon"
          @click="showPopup"
        />
      </form>

      <div class="icon">
        <div class="left">
          <i
            class="like"
            v-if="itemData.postCount"
            :class="[itemData.postCount.viewCount == 1 ? 'selected' : '']"
            @click.stop="switchSelected(itemData.id)"
          ></i>
          <i class="comments"></i>
          <i
            class="recommend"
            :class="[share ? 'selected-recommend' : '']"
            @click="share = ! share"
          ></i>
        </div>
        <i
          class="collection"
          :class="[collection ? 'selected-collection' : '']"
          @click="switchCollection(itemData.id,advertisingData[0].orign)"
        ></i>
      </div>
    </footer>
  </div>
</template>

<script>
import { funtime_date, conversionOfTime_MD } from "@/utils";
import {
  get_home_item,
  get_recommended,
  get_home_comments,
  get_home_all_comments,
  get_home_send_comments
} from "@/apis/http";
import MasonryView from "@/components/HomeComponents/FoundComponents/MasonryView.vue";
export default {
  name: "HomeItem",
  components: { MasonryView },

  data() {
    return {
      value: "",
      icon: require("@/assets/images/home/search.png"),
      show: false,
      showPop: false,
      share: false,
      collection: false,
      itemData: {},
      advertisingData: [],
      commentsData: [],
      hottList: [],
      list: [],
      dataArr: []
    };
  },
  activated() {
    this.getNewData();
    this.get_dataArr();

    setTimeout(() => {
      this.getCommentsData();
    }, 500);
  },
  mounted() {
    // console.log("HomeItem" + this.$route.params.id);

    this.getNewData();
    this.get_dataArr();

    setTimeout(() => {
      this.getCommentsData();
    }, 500);
  },
  methods: {
    async getNewData() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let res = await get_home_item({
        blogdomain: "zheigewangmingbuduobushaozhenghaoshisigezi.lofter.com",
        postid: this.$route.params.id
      });
      // console.log(res); // 这样就获取到了请求的所有数据！
      this.itemData = res.response.posts[0].post;
      this.advertisingData = JSON.parse(this.itemData.photoLinks);
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    async getCommentsData() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_home_comments({
        postId: this.$route.params.id,
        blogId: this.itemData.blogId    
      });
      if (res.list) {
        this.commentsData = res.hotList;
      } else {
        this.commentsData = res.list;
      }
      if (this.commentsData.length) {
        this.show = true;
      }
      //后续就可以通过赋值的方式，在页面上渲染数据。

      let { data: allres } = await get_home_all_comments({
        postId: this.$route.params.id,
        blogId: this.itemData.blogId
      });
      // console.log(allres); // 这样就获取到了请求的所有数据！
      this.hottList = allres.hotList;
      this.list = allres.list;
    },

    async get_send() {
      let res = await get_home_send_comments({
        postId: this.$route.params.id,
        content: this.value,
        blogId: this.itemData.blogId
      });
      console.log(res); // 这样就获取到了请求的所有数据！
    },

    async get_dataArr() {
      let { data: res } = await get_recommended();
      // console.log(res); // 这样就获取到了请求的所有数据！
      this.dataArr = res.list;
    },

    back() {
      this.$router.back();
    },

    conversionOfTime(time) {
      return conversionOfTime_MD(time);
    },

    funtime(time) {
      return funtime_date(time);
    },

    switchSelected(id) {
      if (this.itemData.postCount.viewCount == 1) {
        this.itemData.postCount.viewCount = 0;
      } else {
        this.itemData.postCount.viewCount = 1;
      }

      console.log(this.itemData.postCount.viewCount);
      this.$store.commit("toggleMyLike", id);
      console.log(this.$store.state.myLike);
    },

    switchCollection(id, src) {
      this.collection = !this.collection;

      this.$store.commit("toggleMyCollection", { id, src });
    },

    showPopup() {
      this.showPop = true;
    },

    send() {
      this.get_send();

      this.value = "";
      setTimeout(() => {
        this.getCommentsData();
      }, 500);
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$store.commit("toggleMyFootsteps", {
      id: this.itemData?.id,
      src: this.advertisingData[0]?.orign
    });
    next();
  }
};
</script>

<style lang="scss" scoped>
.home-item {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 100;
  background-color: rgb(255, 255, 255);

  header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100vw;
    margin: 0 auto;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 255, 255);

    .back {
      width: 10px;
      height: 10px;
      margin-left: 10px;
      display: block;
      background-image: url("~@/assets/images/home/icon_back.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }

    .right {
      margin-right: 10px;
      display: flex;
      align-items: center;
      font-size: 14px;

      i {
        width: 15px;
        height: 15px;
        margin: 0 10px;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .collection {
        background-image: url("~@/assets/images/home/2Ee.png");
      }

      .share {
        background-image: url("~@/assets/images/home/F_E.png");
        margin-right: 0;
      }
    }
  }

  main {
    width: 94vw;
    margin: 44px auto;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .user-img {
          width: 25px;
          height: 25px;
          border-radius: 999px;

          img {
            width: 25px;
            height: 25px;
            border-radius: 999px;
          }
        }
        .text {
          display: flex;
          flex-flow: column;

          .time {
            font-size: 12px;
            color: #b8b8b8;
          }
        }
      }
      .right {
        color: #49d2cc;
      }
    }

    .swp {
      width: 94vw;
      margin: 10px auto;
      border-radius: 15px;
      img {
        width: 100%;
        border-radius: 15px;
      }

      ::v-deep .van-swipe__track {
        align-items: center;
        max-height: 490px;
      }

      ::v-deep .van-swipe__indicator {
        background-color: #a1a1a1;
      }
    }

    .text {
      margin: 10px 0;
    }

    .tag {
      display: flex;
      // flex-flow: row wrap;
      width: 100%;
      overflow-x: scroll;
      white-space: nowrap;
      span {
        font-size: 12px;
        color: #c7c7c7;
        padding: 2px 4px;
        margin: 5px;
        border-radius: 15px;
        background-color: #f5f5f5;
      }
    }

    .fun {
      i {
        width: 20px;
        height: 20px;
        margin: 0 10px;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }
      .icon {
        margin: 0 0 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 30vw;
          .like {
            background-image: url("~@/assets/images/home/2qP.png");
          }

          .selected {
            background-image: url("~@/assets/images/home/5vM.png");
          }

          .comments {
            background-image: url("~@/assets/images/home/EkN.png");
          }
          .recommend {
            background-image: url("~@/assets/images/home/ht3.png");
          }

          .selected-recommend {
            background-image: url("~@/assets/images/home/2FX.png");
          }
        }
        .collection {
          background-image: url("~@/assets/images/home/7iH.png");
        }

        .selected-collection {
          background-size: 40px 40px;
          background-image: url("~@/assets/images/home/4X2.png");
        }
      }

      .hot {
        width: 30vw;
        justify-content: space-around;
        align-items: center;
        display: flex;
        font-size: 12px;
        color: #d4d4d4;
      }
    }

    .comments {
      width: 94vw;
      margin: 10px auto;

      h2 {
        margin: 10px 0;
      }

      .on {
        display: flex;
        flex-flow: column;
        align-items: center;
        i {
          width: 40px;
          height: 40px;
          margin: 0 10px;
          background-image: url("~@/assets/images/home/03a.png");
          display: block;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }

        div {
          font-size: 12px;
          color: #cecece;
          margin-top: 10px;
        }

        .btn {
          font-size: 16px;
          color: #23d6cd;
          background-color: #caf9f7;
          display: inline-block;
          padding: 7px 10px;
          border-radius: 999px;
        }
      }

      .show,
      .hot-reviews,
      .reviews {
        h2 {
          margin: 20px 10px;
          font-weight: 700;
        }

        ul {
          li {
            width: 94vw;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .user-img {
              width: 10vw;
              img {
                width: 30px;
                height: 30px;
                margin-top: 10px;
                border-radius: 999px;
              }
            }

            .text {
              width: 80vw;
              .user-name {
                color: #949494;
                font-size: 12px;
              }
              .content {
                margin: 10px 0;
                font-size: 12px;
                line-height: 16px;
              }
              .time {
                color: #d4d4d4;
                font-size: 12px;
              }
            }

            i {
              width: 20px;
              height: 20px;
              margin-top: 10px;
              background-image: url("~@/assets/images/home/2qP.png");
              display: inline-block;
              background-repeat: no-repeat;
              background-position: center center;
              background-size: contain;
            }
          }
        }
      }

      .van-cell {
        text-align: center;
        flex-direction: column;
        align-items: center;

        i {
          width: 10px;
          height: 10px;
          background-image: url("~@/assets/images/home/icon.png");
          display: inline-block;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }

        ::v-deep .van-icon {
          background-image: none;

          &::before {
            content: "";
          }
        }

        .txt {
          width: 35vw;
          padding: 5px 20px;
          display: inline-block;
          font-size: 12px;
          font-weight: 700;
          border-radius: 999px;
          background-color: #ededed;
        }
      }

      ::v-deep .van-popup--bottom {
        height: 85vh;

        .make-comment {
          position: fixed;
          bottom: 0;
          left: 0;
          z-index: 100;
          width: 100vw;
          margin: 0 auto;
          height: 44px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: rgb(255, 255, 255);

          .van-search {
            width: 85vw;

            .van-cell {
              flex-direction: row;
            }
          }

          .send {
            color: #d4d4d4;
            font-size: 14px;
            margin-right: 10px;
          }
        }
      }
    }

    .recommended {
      h2 {
        font-weight: 700;
      }
    }
  }

  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 101;
    width: 100vw;
    margin: 0 auto;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 255, 255);

    ::v-deep .van-search {
      padding: 5px 12px;
    }
    .icon {
      display: flex;
      justify-content: space-between;
      align-items: center;

      i {
        width: 20px;
        height: 20px;
        margin: 0 10px;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 30vw;
        .like {
          background-image: url("~@/assets/images/home/2qP.png");
        }

        .selected {
          background-image: url("~@/assets/images/home/5vM.png");
        }

        .comments {
          background-image: url("~@/assets/images/home/EkN.png");
        }
        .recommend {
          background-image: url("~@/assets/images/home/ht3.png");
        }

        .selected-recommend {
          background-image: url("~@/assets/images/home/2FX.png");
        }
      }
      .collection {
        background-image: url("~@/assets/images/home/7iH.png");
      }

      .selected-collection {
        background-size: 40px 40px;
        background-image: url("~@/assets/images/home/4X2.png");
      }
    }
  }

  ::v-deep .van-swipe {
    max-height: 500px;
  }
}
</style>